<template>
    <render />
</template>
<script setup lang="tsx">
import { getCurrentInstance } from "vue";
import type { ComponentInternalInstance } from "vue";
import type { Text } from "../interface.ts";

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const model = defineModel();
const props = withDefaults(defineProps<Text>(), {
    rules: [],
    maxlength: undefined,
    minlength: undefined,
    showWordLimit: false,
    placeholder: "",
    clearable: false,
    formatter: undefined,
    parser: undefined,
    disabled: false,
    size: "default",
    prefixIcon: undefined,
    suffixIcon: undefined,
    autocomplete: "off",
    name: undefined,
    readonly: false,
    max: undefined,
    min: undefined,
    step: undefined,
    resize: "none",
    autofocus: false,
    form: undefined,
    ariaLabel: undefined,
    tabindex: undefined,
    validateEvent: true,
    inputStyle: () => ({}),
    suffixSlotName: undefined,
    prefixSlotName: undefined,
    prependSlotName: undefined,
    appendSlotName: undefined,
    isComposing :undefined
});


const slots: { prefix?: Function, suffix?: Function, prepend?: Function, append?: Function } = {}
props.prefixSlotName && (slots.prefix = () => proxy?.$slots[props.prefixSlotName!]?.())
props.suffixSlotName && (slots.suffix = () => proxy?.$slots[props.suffixSlotName!]?.())
props.prefixSlotName && (slots.prepend = () => proxy?.$slots[props.prefixSlotName!]?.())
props.appendSlotName && (slots.append = () => proxy?.$slots[props.appendSlotName!]?.())

const render = () =>
    (
        <el-input
            type="text"
            v-model={model.value}
            class={props.class}
            maxlength={String(props.maxlength)}
            minlength={String(props.minlength)}
            show-word-limit={props.showWordLimit}
            placeholder={props.placeholder}
            clearable={props.clearable}
            formatter={props.formatter}
            parser={props.parser}
            disabled={props.disabled}
            size={props.size}
            prefix-icon={props.prefixIcon}
            suffix-icon={props.suffixIcon}
            autocomplete={props.autocomplete}
            name={props.name}
            readonly={props.readonly}
            max={props.max}
            min={props.min}
            step={props.step}
            resize={props.resize}
            autofocus={props.autofocus}
            form={props.form}
            aria-label={props.ariaLabel}
            tabindex={props.tabindex}
            validate-event={props.validateEvent}
            input-style={props.inputStyle}
            onBlur={props.blur}
            onFocus={props.focus}
            onChange={props.change}
            onInput={props.input}
            onClear={props.clear}
            isComposing ={props.isComposing }
        >
            {slots}
        </el-input>
    ) as unknown as Element;
</script>
